<template>
  <!-- 富文本编辑 -->
  <div class="edit">
    <h3 style="text-align:center;margin-bottom:10px">富文本编辑器</h3>
   <Toolbar
      class="edit_tool"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      class="edit_editor"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
    />
    <el-button type="primary" @click="edit_save">确 定</el-button>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        toolbarKeys:["bold","underline","italic","color","bgColor","fontSize","delIndent","header1","header2","editVideoSize","codeSelectLang","insertTableCol",'emotion']
      },
      editorConfig: { 
        placeholder: "请输入内容..." ,
        // 自定义属性...
        // MENU_CONF: {}
        },
      mode: "default", // or 'simple'
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    //   getAllMenuKeys是富文本工具栏的工具列表
    //   console.log('toolbarKeys',this.editor.getAllMenuKeys());
    //   console.log('菜单配置：',this.editor.getMenuConfig() )
    },
    edit_save: function () {
      console.log(this.html);
      console.log(this.editor.getText());
    },
    
    
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html =
        '<h2 style="text-align: center;">通知</h2><p style="text-indent: 2em; text-align: left;">这是一则通知</p><p style="text-align: right;">哈哈哈 &nbsp; &nbsp;</p>';
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>

<style scoped lang="less">
// 导入edit富文本编辑框的样式
@import "@wangeditor/editor/dist/css/style.css";
.edit {
//   border: 1px solid #ccc;
  position: relative;

  // 工具栏
  .edit_tool {
    height: auto;
    border: 1px solid #ccc;

  }
  // 编辑框
  .edit_editor {
    height: 300px;
    overflow-y: hidden;
    border: 1px solid #ccc;
  }
  // 按钮
  .el-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
</style>